<template>
    <div>
        <el-card>
            <el-form ref="profileFormRef" :model="profileForm" :rules="profileFormRules" label-width="60px">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="profileForm.title" placeholder="请输入标题"></el-input>
                </el-form-item>
                <el-form-item label="简介" prop="content">
                    <vue-tinymce
                            v-model="profileForm.content"
                            :setting="setting"
                            placeholder="请输入简介内容"
                    />
                </el-form-item>
            </el-form>
            <div style="float: right;margin-bottom: 10px">
                <el-button type="primary" @click="update">保存修改</el-button>
            </div>
            <p v-html="content"></p>
        </el-card>
    </div>
</template>

<script>

    export default {
        name: "Profile",
        data() {
            return {
                path: localStorage.getItem("Path") ? localStorage.getItem("Path") : {},
                profileForm: {},
                profileFormRules: {
                    title: [{required: true, message: "请输入标题", trigger: "blur"}],
                    content: [{required: true, message: "请输入简介", trigger: "blur"}],
                },
                content:'',
                setting: {
                    menubar: false,
                    //顶部显示的 所有工具栏 (包括更多里面的)
                    toolbar: "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify  | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat | ",
                    // 快速工具栏_选择_工具栏
                    quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
                    //加载工具
                    plugins: "image media table lists fullscreen quickbars",
                    images_upload_url: 'http://localhost:8081/file/upload',//图片上传地址
                    language: 'zh_CN', //本地化设置
                    branding: false, //隐藏右下角技术支持
                    height: 440,//高

                }
            }
        },
        created() {
            this.select();
        },
        methods: {
            select() {
                // t.profileSelect(1).then((res) => {
                //     this.profileForm = res.data;
                // })
            },
            update() {
                this.$refs.profileFormRef.validate(valid => {
                    if (!valid) return;
                    console.log(this.profileForm);
                    this.content=this.profileForm.center
                    //     t.profileUpdate(this.profileForm).then((res) => {
                //         this.select();
                //         if (res.flag) {
                //             this.$message({
                //                 message: res.msg,
                //                 type: "success"
                //             })
                //         } else {
                //             this.$message({
                //                 message: res.msg,
                //                 type: "error"
                //             })
                //         }
                //     });
                })
            }
        }
    }
</script>

<style scoped>

</style>